<template>
  <div>
    <table width="600px" border="1px" cellspacing="0">
      <thead>
        <tr>
          <td>
            <input type="checkbox" @click="chooseAll(!flag)" v-model="flag" />
          </td>
          <td>id</td>
          <td>姓名</td>
          <td>年龄</td>
          <td>城市</td>
          <td>操作</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in auto" :key="index">
          <td>
            <input
              type="checkbox"
              v-model="item.flag"
              @click="chooseOne(index)"
            />
          </td>
          <td>{{ index + 1 }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.city }}</td>
          <td>
            <button @click="del(index)">删除</button
            ><button @click="edit(index)">编辑</button>
          </td>
        </tr>
      </tbody>
    </table>

    <button style="background: red; width: 100px; height: 40px" @click="clear">
      删除选中
    </button>
  </div>
</template>
<script>
import Bus from "../Bus";
export default {
  props: ["auto"],
  data() {
    return {
      list: this.auto,
      flag: false,
    };
  },
  methods: {
    del(key) {
      this.$emit("del", key);
    },
    chooseAll(flag) {
      this.$emit("chooseAll", flag);
    },
    chooseOne(key) {
      this.$emit("chooseOne", key);
    },
    clear() {
      this.$emit("clear");
    },
    edit(key) {
      Bus.$emit("edit", key);
    },
  },
  watch: {
    list: {
      handler(val) {
        if (val.filter((item) => item.flag == true).length == val.length) {
          this.flag = true;
        } else {
          this.flag = false;
        }
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>